<template>
  <div>
    <el-card class="left">
      <el-descriptions title="简介" :column="2" border label-style="width:150px" content-style="width:200px">
        <template slot="extra">
          <el-button type="primary"   @click="dialogFormVisible = true" size="small">操作</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            头像
          </template>
          <img class="img" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" alt="头像" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            账户名
          </template>
          {{User.userName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            姓名
          </template>
          {{User.realName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-odometer"></i>
            年龄
          </template>
          {{User.age}}岁
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-male"></i>
            <i class="el-icon-female"></i>
            性别
          </template>

          <el-tag size="small">{{User.sex}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            邮箱Email
          </template>
          {{User.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号码
          </template>
          {{User.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            地址
          </template>
          {{User.address}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            职业
          </template>
          {{User.occupation}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-magic-stick"></i>
            个性签名
          </template>
          {{User.design}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogFormVisible"
      width="60%"
      :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="150px">
        <div class="updateinfo">
          <div class="Dleft">
            <el-form-item label="头像">
              <img class="img" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" alt="头像" />
            </el-form-item>
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="form.realName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" ></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-switch
                v-model="form.sex"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="男"
                inactive-text="女"
                :active-value= "1"
                :inactive-value= "0"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>

          </div>
          <div class="Dright">
            <el-form-item label="用户编号">
              <el-input v-model="form.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="form.account" ></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.address" placeholder="XX社区XX栋XX单元XX号"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="职业">
              <el-input v-model="form.occupation"></el-input>
            </el-form-item>
            <el-form-item label="兴趣爱好">
              <el-input v-model="form.hobby"></el-input>
            </el-form-item>
            <el-form-item label="个性签名">
              <el-input v-model="form.design"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="submit">提 交</el-button>
  </span>
    </el-dialog>
    <div>
      <router-view/>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "UserCenter",
  data() {
    return {
      User: {
        userName:"admin",
        sex:"男",
        realName:"法外狂徒张三 ",
        phone:"1008611",
        occupation:"法律顾问",
        age:"23",
        email:"3457881247@qq.com",
        address:"北京市朝阳区 ",
        design:"我可没时间跟你狐闹"
      },
      dialogFormVisible: false,
      form: {
        password: "****",
        realName: "admin",
        age: "",
        email: "",
        phone: "",
        sex: "",
        id: "",
        account: "",
        address: "",
        hobby: "聚聚会，打打闹",
        occupation: "",
        design: "",
      },
    };
  },
  mounted() {
    this.load();
  },
  created() {
    // 用户的基本信息
    const user = JSON.parse(localStorage.getItem("user"));
    this.User.userName = user.account;
    this.User.realName = user.realName;
    this.User.sex = user.sex;
    this.User.age = user.age;
    this.User.phone = user.phone;
    this.User.occupation = user.occupation;
    this.User.email = user.email;
    this.User.address = user.address;

    this.form.realName = this.User.realName;
    this.form.account = this.User.userName;
    this.form.age = this.User.age;
    this.form.sex = this.User.sex === "女"? 0:1;
    this.form.address = this.User.address;
    this.form.email = this.User.email;
    this.form.phone = this.User.phone;
    this.form.occupation = this.User.occupation;
    this.form.design = this.User.design;
    this.form.id = user.id;
  },
  methods: {
    open() {
      this.dialogFormVisible = true;
    },
    load() {

    },
    submit() {
      axios.post(
        "http://localhost:8888/changeMes",
        this.form
      ).then(res=>{
        if(res.status === 200 && res.data.update === "success"){
          this.$message.success("修改完成！！！");
          this.User.userName = this.form.account;
          this.User.realName = this.form.realName;
          this.User.sex = this.form.sex === 1? "男":"女";
          this.User.age = this.form.age;
          this.User.phone = this.form.phone;
          this.User.occupation = this.form.occupation;
          this.User.email = this.form.email;
          this.User.address = this.form.address;
          localStorage.setItem("user", JSON.stringify(this.form));
          this.dialogFormVisible = false;
        }
      });
    },
    handleClose() {
      this.dialogFormVisible = false;
    },
  }
};
</script>

<style scoped>
.updateinfo {
  height: 350px;
  overflow: auto;
}
.Dleft {
  /* width: 330px; */
  float: left;
}
.Dright {
  overflow: hidden;
}
.img {
  width: 100px;
  height: 100px;
}
.left{
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
  padding: 20px 20px 20px 20px;
}

</style>
